<template>
  <div>
    <el-table ref="multipleTable" :data="itemList" size='medium' border row-key="id" default-expand-all 
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}" :highlight-current-row="selectType=='single'"
    @selection-change="handleSelectionChange" @row-click="rowClick">
      <el-table-column type="selection" width="55" v-if="selectType=='selection'"></el-table-column>
      <el-table-column width="55" label="选择" v-if="selectType=='single'">
        <template slot-scope="scope">
          <el-radio label=""></el-radio>
        </template>
      </el-table-column>
      <el-table-column v-for="(item, index) in formData.fieldList" :key="index" v-if="item.fieldTypeKey=='AutoField'" :label="item.showName" width="60">
        <template slot-scope="scope">
          {{scope.row[item.key]}}
        </template>
      </el-table-column>
      <el-table-column v-for="(item, index) in formData.fieldList" :key="index" v-if="item.fieldTypeKey!='AutoField'" :label="item.showName" :width="item.width">
        <template slot-scope="scope">
          <div v-if="item.columnType=='Option'">
            {{dictOptions[item.key]?dictOptions[item.key][scope.row[item.key]]:''}}
          </div>
          <div v-else-if="item.columnType=='Download'">
            <el-button @click="downloadAction(scope.row)" type="success" size="small">下载</el-button>
          </div>
          <div v-else-if="item.columnType=='Foreign'">
            {{scope.row[item.relatedModel]?scope.row[item.relatedModel][item.relatedKey]:scope.row[item.key]}}
          </div>
          <div v-else-if="item.columnType=='Bool'">
            {{scope.row[item.key]?'是':'否'}}
          </div>
          <div v-else-if="item.columnType=='DateTime'">
            <!-- {{(scope.row[item.key] && scope.row[item.key].length>=19)?scope.row[item.key].substring(0, 19).replace('T', ' '):'未知'}} -->
            {{ scope.row[item.key]? formatTime.dateFormat(scope.row[item.key]):'未知' }}
          </div>
          <div v-else-if="item.columnType=='Custom'">
            <slot name="custom" :slotKey="item.key" :slotRow="scope.$index" :slotRowData="scope.row"></slot>
          </div>
          <div v-else>
            {{scope.row[item.key]}}
            <!-- <slot name="custom" :slotRow="scope.$index" :slotRowData="scope.row"></slot> -->
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="redact" label="操作" fixed="right" width="100">
        <template slot-scope="scope">
          <slot name="operateRow" :slotRow="scope.$index" :slotRowData="scope.row"></slot>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import { operateAction } from '@/views/interface/form/operate.js'
  export default {
    props: {
      selectType: {
        type: String,
        default: 'selection'
      },
      itemList: {
        type: Array,
        default: ()=>[]
      },
      formData: {
        type: Object,
        default: ()=>{}
      },
      dictOptions: {
        type: Object,
        default: ()=>{}
      },
    },
    components: {
    },
    data() {
      return {
      }
    },
    created() {
    },
    methods: {
      //触发多选
      handleSelectionChange(val) {
        this.$emit('handleSelectionChange', val)
      },
      rowClick(val){
        if(this.selectType == 'single'){
          console.log('单选', val)
          this.$emit('rowClick', val)
        }else{
          this.$emit('rowClick', val)
        }
      },
      // 下载事件
      downloadAction(val){
        console.log('val', val)
        window.location.href = val.fileModel.url
      },
    }
  }

</script>
